<template>
    <van-nav-bar title="立即购买" left-text="返回" left-arrow @click-left="$router.back()" />
    <div v-for="item in list" :key="item.id" class="row">
      <div class="card">
        <van-card :desc="item.text" :title="item.name" :thumb="item.image">
          <!-- 价格的插槽 -->
          <template #price>
            <Price :item="item" />
          </template>
          <!-- 数量的插槽 -->
          <template #num>
            <van-stepper v-model="item.count" />
          </template>
          <template #tags>
            <van-tag plain type="primary">酒水</van-tag>
          </template>
        </van-card>
      </div>
    </div>
    <van-submit-bar :price="totalFee" button-text="提交订单" @submit="onSubmit">
      <template #tip>
        <div class="station">
          <!-- <div v-if="$store.state.station">{{ $store.state.station.name }}</div> -->
          <div v-if="station">{{ station.name }}</div>
          <div v-else>请设置自提点</div>
          <!-- <router-link to="/station">{{ $store.state.station ? '修改自提点' : '设置自提点' }}</router-link> -->
          <router-link to="/pickupsite">{{ station ? '修改自提点' : '设置自提点' }}</router-link>
        </div>
      </template>
    </van-submit-bar>
    <div style="height: 200px;"></div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  import axios from 'axios';
  import _ from 'lodash';
  import { showDialog } from 'vant'; // 引入弹窗的方法
  import global from '@/config/global.js' // 引入全局变量
  export default {
    data() {
      return {
        list: [], // 列表数据
      }
    },
    activated() {

      const item = global.item; // 从全局变量中取出来
       //将传过来的商品加入到list中
      if (global.item){
        this.list = [item];
      }else{
        this.$router.replace('/')
      }
    },
    computed: {
      // this.$store.state.station 使用了 mapState 之后直接可以写成 this.station
      ...mapState(['station']), // 将全局的station通过计算属性变为自己的属性
      // 总价格
      totalFee() { // 单位：分
        const item = this.list[0];
        if (!item) { // 开始list为空的时候
          return 0;
        }
        return item.price * item.count * 100;
      }
    },
    methods: {

      async onSubmit() { // 提交订单
        if (!this.station) {
          return showDialog({ message: '请选择自提点' });
        }
        const params = { // 提交的参数
          stationId: this.station.id, // 自提点的id
          fee: this.totalFee / 100, // 总费用
          list: this.list.map(item => ({
            goodsId: item.id, // 每一个商品对应的id
            count: item.count, // 每一个商品的数量
          }))
        };

        const res = await axios.post('http://localhost:6001/create/order', params);
        const data = res.data;
        if (!data.success) {
          return showDialog({ message: data.message });
        }
        this.$store.state.$bus.emit('refreshOrderList');
        this.$router.push('/')
        showDialog({ message: '提交订单成功' });
      }
    }
  }
  </script>
  
  <!-- <style>
  .van-submit-bar {
    bottom: 50px !important;
  }
  </style> -->
  <style scoped>
  .row {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .checkbox {
    margin: 0 4px;
  }
  .card {
    flex: 1; /* 剩下的布满 */
  }
  :global(.van-submit-bar) {
    /* 如果要在scoped中定义全局的class，需要使用:global(.xx)的格式 */
    bottom: 50px !important;
  }
  .station {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  </style>